// 角色管理
<template>
  <div class="role">
     <div class="role-content">
        <div class="role-top">
            <el-input placeholder="请输入角色名称" v-model="paging.name" clearable></el-input>
            <el-button type="primary" icon="el-icon-search" @click="role">搜索</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="addEquipment()">添加</el-button>
        </div>
        <!--内容 -->
        <el-card class="box-card">
             <el-table :data="listData" style="width: 100%"  border>
                <el-table-column  prop="name" label="角色名称"  sortable   > </el-table-column>
                <el-table-column prop="desc" label="说明"  > </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handelEdit(scope.row)" class="blue">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button size="mini"  @click="authorization(scope.row)" class="blue">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="paging"></Paging>
      </div>
        <!-- 添加编辑 -->
        <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
            <el-form-item label="说明" prop='desc' :label-width="formLabelWidth">
              <el-input v-model="ruleForm.desc" autocomplete="off"></el-input>
            </el-form-item>
          <el-form-item label="角色名称"  prop='name' :label-width="formLabelWidth">
            <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="affirm(ruleForm)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 授权 -->
        <el-dialog title="授权" :visible.sync="FormVisible">
          <el-tree
          style="width:150px"
            :data="data"
            show-checkbox
            node-key="id"
            :default-checked-keys="select"
            ref="empowerSelect"
            :current-page="currentPage"
            :total="total"
          >
          </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="FormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm()"><div>确 定</div></el-button>
        </div>
        <!-- </template> -->
      </el-dialog>
     </div>
  </div>
</template>
<script>
import Rolemanag from'../../api/system/rolemanage'
import Paging from "../../components/Paging"; //分页
export default {
components: {
    Paging
  },
  data() {
    return {
     // 分页
      paging:{
        name: '',
        currentPage: 1,//当前的默认的页数
        eachpage: 10,//默认的页码
        total: 0,//初始值共数据条
        totalPageNo: 1,
      },
      listData:[],//初始化数据
      dialogFormVisible:false,
      FormVisible: false, //弹窗口
      select:[],//选中的权限'
      rules:[],
      data:[],
      authoriId:'',
    // 弹框
      titleMap: {
        addEquipment:'新增',            
        editEquipment: "编辑"            
     },
     //  输入框
     formLabelWidth: '120px',
    //  输入框
     ruleForm:{
         desc:"",
         name:""
     },
      rules:{
         desc:[
           { required: true, message: '说明不能为空', trigger: 'blur' }
        ],
         name:[
           { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ]
      },
     compileId:"",
     total:0,
     dialogStatus:"",
      currentPage:""
    }
  },
  created() {
    this.role()
  },
  methods: {
    // 分页负值
    handles(val) {
      this.allPages = val;
      this.role();
    },
    //数据详情
      role(){
        let _this=this
        Rolemanag.Rolemanage(this.paging).then(res=>{
            _this.listData=res.data.data.items
            _this.paging.currentPage=res.data.data.pageNo
            _this.paging.eachpage=res.data.data.pageSize
            _this.paging.total=res.data.data.total
            _this.paging.totalPageNo=res.data.data.totalPageNo
        })
      },
    //   删除
    handleDelete(index,row){
      console.log(row)
        let _this=this
        let id=row.id
      _this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          // 提示框
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          Rolemanag.deletes(id).then((res) => {
            _this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
            _this.role();
          });
        })
        .catch(() => {
          _this.$information.error("已取消删除");
        });
    },
    // 添加编辑
    affirm(ruleForm){
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
               if(this.dialogStatus=='addEquipment'){
            Rolemanag.addition(this.ruleForm).then(res=>{
                if (res.data.errmsg=='成功') {
                  this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                    });
                }else{
                   this.$message.error(res.data.errmsg);
                }
            this.role()
             this.dialogFormVisible = false;
        })
        }
        if(this.dialogStatus=='editEquipment'){
            Rolemanag.compile(this.ruleForm,this.compileId).then(res=>{
                if (res.data.errmsg=='成功') {
                  this.$message({
                    message: '恭喜你，更新管理员成功',
                    type: 'success'
                    });
                }else{
                   this.$message.error(res.data.errmsg);
                }
            this.role()
        })
         this.dialogFormVisible=false
        }
          } else {
           this.$message.error('输入框不能为空！');
            return false;
          }
        });
    },
    // 授权
    authorization(row){
        this.authoriId=row.id
        this.FormVisible=true
         Rolemanag.accredit(row.id).then(res=>{
            this.data=res.data.data.systemPermissions 
            this.role()
        })
    },
    confirm(){
         let data={
           roleId: this.authoriId,
           permissions: this.$refs.empowerSelect.getCheckedKeys()// 获取每一级选中的权限
        }
         Rolemanag.accredits(data).then(res=>{
            if (res.data.errmsg=='成功') {
                  this.$message({
                    message: '恭喜你，授权修改成功',
                    type: 'success'
                    });
                }else{
                   this.$message.error(res.data.errmsg);
                }
            this.role()
        })
         this.FormVisible=false
    },
    // 添加
     addEquipment() {
        this.dialogFormVisible = true;
        this.dialogStatus = 'addEquipment';
        this.ruleForm={}
    },
    // 编辑
      handelEdit(row) {
         this.compileId=row.id
         this.dialogFormVisible = true;
         this.dialogStatus = 'editEquipment';
         this.ruleForm=row
        },
    },
watch:{
    // 去除错误提示
    dialogFormVisible(val){
     if (val == false) {
         this.$refs.ruleForm.clearValidate();
     }
    }
  }
}
</script>
<style scoped>
.role{
    width: 100%;
    line-height: 0px;
    overflow: hidden;
}
/* 添加编辑 */
.el-input{
    width: 300px;
}
.el-form/deep/.el-input__inner{
    width: 300px;
}
.el-form/deep/.el-form-item__content{
    width: 300px;
} 
>>>.el-dialog/deep/.el-dialog__header{
    width: 50px;
}
.el-form-item/deep/.el-form-item__error{
    text-indent:3rem
}
/* 分页 */
.block{
    width: 40%;
    padding-top: 20px;
}
/* 字体居中 */
.blue{
    background: #409EFF;
    color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
   text-align: center;
}
.el-table/deep/th.is-sortable {
    cursor: pointer;
    text-align: center;
}
.el-table td, .el-table/deep/th.is-leaf {
    text-align: center;
}
/* 布局 */
.el-card/deep/.box-card{
  height: 50%;
   overflow: hidden;
}
.role-content{
    width: 96%;
    margin: auto;
    overflow: hidden;
}
.el-input{
    width: 200px;
    margin-right: 10px;
}
.role-top{
    width: 100px;
   line-height: 60px;
}
.box-card{
   overflow: hidden;
}
</style>
